<template>
 
    <div class="login">
      <el-card style="min-width: 480px">
        <template #header>
          <div class="card-header">
            <span>管理员登录</span>
          </div>
        </template>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="ruleForm.userName" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="btn">
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button type="success" @click="resetForm(ruleFormRef)">重置</el-button>
            <el-button type="success" @click="getdata">查询</el-button>
          </div>
        </template>
      </el-card>
    </div>
 
   
  </template>
<script lang="ts" setup>


import { reactive, ref } from 'vue'
import {type LoginData} from '@/api/admin/type'
import   {Login} from '@/api/admin/index'
import   {getlogin} from '@/api/admin/index'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import router from '@/router';

const { push } = useRouter()
const route = useRoute()

interface RuleForm {
  userName: string
  password: string
}

const formSize = ref('default')
const ruleFormRef = ref<LoginData>()
const ruleForm = reactive<LoginData>({
  userName: '',
  password: ''
})

const rules = reactive<FormRules<LoginData>>({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
    
    await Login(ruleForm).then(function(res){
        switch(res.data.code){
          case -1:
            ElMessage.error(res.data.message)
            break;
            case -2:
            ElMessage.error(res.data.message)
            break;
            case 1:
            ElMessage.success(res.data.message)
            localStorage.setItem("token",res.data.data)
            console.log(localStorage.getItem("token"));
            localStorage.setItem("name",res.data.message)
            router.push('/main')
            break;
        }
     })
   
    
    } else {
      console.log('error submit!', fields)
    }
  })
}
const getdata=async()=>{
  await getlogin().then(function(res){
    console.log(res.data);
    
  })
}
 
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background:url("https://haowallpaper.com/link/common/file/getCroppingImg/2bff1500a87449bbd5870958f0f6960a2bff1500a87449bbd5870958f0f6960a");
  background-size: 100% 100%;
}

/* https://b0.bdstatic.com/95fb3be87079ebbf1a046a2c360e1eeb.jpg@h_1280 */
.btn {
  display: flex;
  justify-content: center;
}
.btn button {
  margin-left: 12px;
  margin-right: 12px;
}
</style>
